const path = require('path')
const { name } = require('./package')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  outputDir: 'dist/subapp/home',
  publicPath: '/subapp/home',
  chainWebpack: (config) => config.resolve.symlinks(false),
  lintOnSave: false,
  devServer: {
    port: process.env.VUE_APP_PORT,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  },
  css: {
    sourceMap: process.env.NODE_ENV === 'development',
    loaderOptions: {
      sass: {
        additionalData: `@import "~@/assets/css/variables.scss"`
      },
      scss: {
        additionalData: `@import "~@/assets/css/variables.scss";`
      }
    }
  },
  // 自定义webpack配置
  configureWebpack: {
    resolve: {
      alias: {
        src: resolve('src'),
        '@assets': resolve('src/assets'),
        components: resolve('src/components'),
        views: resolve('src/views'),
        api: resolve('src/api'),
        utils: resolve('src/utils'),
        config: resolve('src/config'),
        vue: path.resolve(`./node_modules/vue`)
      }
    },
    output: {
      // 把子应用打包成 umd 库格式
      library: `${name}-[name]`,
      libraryTarget: 'window',
      jsonpFunction: `webpackJsonp_${name}`
    },
    externals: {
      vue: 'Vue', // 这里以Vue为示例
      'element-plus': 'ElementPlus' // 这里以Vue为示例
    }
  }
}
